<!--

  常用功能入口

  // 带*号表示必填属性
  props: 
    href:(String)                             跳转链接
    *icon:(String)                            图标链接
    *title:(String)                           标题
    subtitle:(String)                         小标题
    background:((RGB || HEX || var(...)))     背景颜色
    type:(String)                             类型         一般最后一个入口为“更多”时，将type赋值为"more"

  slot: 

  demo: 
    <qm-common-function
      v-for="(item, index) in ..."
      :key="index"
      :icon="item.icon"
      :title="item.title"
      :subtitle="item.subtitle"
      :href="item.href"
      :background="item.background"
      :type="index === ....length - 1 ? 'more' : ''"
    ></qm-common-function>

-->



<template>
  <div class="qm-common-function" :style="`background: ${background}`">
    <f7-link :href="href || '#'" class="qm-common-function-content" :class="{more : type === 'more'}">
      <img class="qm-common-function-content-icon" :src="icon" alt="" />
      <div class="qm-common-function-content-title">{{ title }}</div>
      <template v-if="subtitle">
        <div class="qm-common-function-content-subtitle">{{ subtitle }}</div>
      </template>
    </f7-link>
  </div>
</template>

<script>
export default {
  props: {
    href: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
    },
    title: {
      type: String,
    },
    subtitle: {
      type: String,
      default: "",
    },
    background: {
      type: String,
      default: "transprant",
    },
    type: {
        type: String,
        default: (value)=>{
          if(["more"].indexOf(value) !== -1) {
            return value;
          }
          return "";
        }
    }
  },
};
</script>

<style lang="less" scoped>
.qm-common-function {
  // max-width: 100%;
  // width: calc(208px * var(--ratio));
  height: calc(219px * var(--ratio));
  padding: calc(24px * var(--ratio));
  border-radius: calc(16px * var(--ratio));
  &-content {
    display: block;
    width: 100%;
    height: 100%;
    &-icon {
      width: calc(64px * var(--ratio));
      height: calc(64px * var(--ratio));
    }
    &-title {
      font-weight: 500;
      font-size: var(--font-size-maincontent);
      color: var(--color-text-title);
      margin-top: calc(18px * var(--ratio));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &-subtitle {
      color: #9ea7b7;
      font-size: var(--font-size-subcontent-2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .more{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .qm-common-function-content-title {
          color: #3385FF;
      }
  }
}
</style>
